import React, { useState } from 'react'
import { getNewsDetailApi, getNewsLikeApi, getNewsCommentsApi, getCommentsLikeApi, ToNewsCommentsApi } from '../service/newService'
import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import NavbarCom from '../components/NavbarCom'
import { useNavigate } from "react-router-dom"
import { Modal } from 'antd-mobile'
import { HeartOutline, StarFill, HeartFill, LikeOutline, CheckCircleFill } from 'antd-mobile-icons'

export default function NewsDeatil() {
    const { state } = useLocation()
    const [detail, setdetail] = useState({ cover: '', content: '', title: '', commentNum: '', likeNum: '', publishDate: '' })
    const [commentsList, setcommentsList] = useState<any>()
    const [pages, setpages] = useState({ pageNum: 1, pageSize: 15 })

    let navigate = useNavigate();

    let getDetail = async () => {
        let res = await getNewsDetailApi(state.id)
        let res2 = await getNewsCommentsApi({ pageNum: pages.pageNum, pageSize: pages.pageSize })
        // console.log(res2);

        if (res.data.code == 200) {
            setdetail(res.data.data)
        }
        if (res2.data.code == 200) {
            setcommentsList(res2.data.rows)
        }

    }
    useEffect(() => {

        getDetail()

    }, [])

    let back = () => {
        navigate(-1)
    }
    // 新闻点赞
    const [flag, setflag] = useState(true)
    let tolike = async () => {
        let res = await getNewsLikeApi(state.id)
        if (res.data.code == 200) {
            setflag(false)
            setdetail({ ...detail, likeNum: detail.likeNum + 1 })
        }
        // console.log(res);
    }

    // 评论点赞
    const [flag2, setflag2] = useState(true)
    let tolike2 = async (e: any, item: any) => {
        console.log();

        item.likeNum = item.likeNum + 1
        let res = await getCommentsLikeApi(item.id)
        if (res.data.code == 200) {
            console.log(e.target);
            e.target.style.color = "#3589ff"
            setflag2(!flag2)
        }

    }


    useEffect(() => {
        var a = document.querySelector(".bottom")
        a && a.classList.add("none")

        return () => {
            a && a.classList.add("block")
            navigate(0)
        }
    }, [])

    const [dialogFlag, setdialogFlag] = useState(false)
    const [main, setmain] = useState("")
    let toDialog = () => {
        setdialogFlag(true)

    }
    let sure = async () => {
        let res = await ToNewsCommentsApi({ newsId: state.id, content: main })
        console.log(res);
        if (res.data.code == 200) {
            console.log(res);
            setdialogFlag(false)
            setmain('')
            Modal.alert({
                content: '添加成功'
            })
        }
    }
    return (
        <div className='newDetail'>
            <NavbarCom children={detail.title} backArrow={true} back={back}></NavbarCom>
            <div className='div-h'></div>
            <img src={"/api2/" + detail.cover} alt="" />
            <div className='detail-main'>
                <p className='title'>{detail.title}</p>
                <div className='span'><span className='span1'>{flag ? <HeartOutline onClick={() => { tolike() }} /> : <HeartFill color='red' />} {detail.likeNum}</span> <span className='span2'>发布时间:{detail.publishDate}</span></div>
                <p className='comment'>阅读量:{detail.commentNum}</p>
            </div>
            <p className='content' dangerouslySetInnerHTML={{ __html: detail.content.replace(/<img[^>]*src[=\"\'\s]+[^\.]*\/([^\.]+)\.[^\"\']+[\"\']?[^>]*>/gi, "") }}></p>
            <div className='message'>
                <p className='star'>
                    <StarFill color='#1677ff' fontSize={20} /><StarFill color='#1677ff' fontSize={20} /><StarFill color='#1677ff' fontSize={20} /><StarFill color='#1677ff' fontSize={20} /><StarFill color='#1677ff' fontSize={20} /><StarFill color='#1677ff' fontSize={20} /><StarFill color='#1677ff' fontSize={20} /><StarFill color='#1677ff' fontSize={20} /><StarFill color='#1677ff' fontSize={20} /><StarFill color='#1677ff' fontSize={20} /><StarFill color='#1677ff' fontSize={20} /><StarFill color='#1677ff' fontSize={20} /><StarFill color='#1677ff' fontSize={20} /><StarFill color='#1677ff' fontSize={20} /><StarFill color='#1677ff' fontSize={20} /><StarFill color='#1677ff' fontSize={20} /><StarFill color='#1677ff' fontSize={20} /><StarFill color='#1677ff' fontSize={20} />
                </p>
                <h3>留言精选: <button onClick={() => {
                    toDialog()
                }} style={{ "width": "80px", "height": "22px", "fontSize": "14px", "marginLeft": "200px" }}>发布评论</button></h3>
                <ul>
                    {
                        commentsList && commentsList.map((item: any) => {
                            return <li key={item.id}>
                                <div className='li-div'>
                                    <span >用户:{item.userName}</span>
                                    <span onClick={(e) => { tolike2(e, item) }}>{<LikeOutline />}:{item.likeNum}</span>
                                </div>
                                <p className='li-div'>
                                    <span className='main'>{item.content ? item.content : "默认评价"}</span>
                                    <span className='time'>发表时间:{item.commentDate}</span>
                                </p>
                            </li>
                        })
                    }

                </ul>
                <button onClick={() => {
                    navigate(-1)
                }}>返回</button>
            </div>
            {/* dialog */}
            <div className={dialogFlag ? "dialog block" : "dialog none"}>
                发布评论:<input type="text" value={main} onChange={(e) => { setmain(e.target.value) }} />
                <button onClick={() => { sure() }}>发布</button>
            </div>
        </div>
    )
}
